<template>
  <div class="app-container">
    <el-tabs v-model="activeName" class="demo-tabs">
      <el-tab-pane label="详情" :name="1"><DetailInfo v-if="activeName === 1" :detailId="id" /></el-tab-pane>
      <el-tab-pane label="终端" :name="2"><Device  v-if="activeName === 2" :detailId="id"/></el-tab-pane>
    </el-tabs>
  </div>
</template>
<script lang="ts" setup>
  import { ref, watch } from 'vue';
  import { useRoute, useRouter } from 'vue-router';
  import DetailInfo from './component/DetailInfo.vue';
  import Device from './component/device.vue'

  const route = useRoute();
  const router = useRouter();
  const activeName = ref(1);
  const id: string = ((route.query && route.query?.id) as string) || '';
  watch(
    () => route.query.id,
    (newVal,oldVal)=>{
      console.log('newVal',newVal,'oldVal',oldVal)
      if(newVal){
        location.reload();
      }
    }
  )
</script>
